<%-- 
    Document   : customerexpand
    Created on : Aug 11, 2012, 10:19:09 AM
    Author     : ems
--%>


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>

<html>
    <head>

        <script type="text/javascript" language="javascript" src="../scripts/jQuery/confirm.js"></script>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.fancybox-1.3.4.pack.js"></script>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jq.date.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/ui.datepicker.css"/>
        <link rel="stylesheet" type="text/css" href="../css/thickbox.css"/>
        <link rel="stylesheet" type="text/css" href="../css/paging.css"/>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/thickbox.js"></script>
        <script type="text/javascript" language="javascript">
            var open_cur = 0;
            $j = jQuery.noConflict();
            $j(document).ready(function(){
                $j('input#dateStart,input#dateStart1, input#dateEnd').datepicker({ dateFormat: 'dd/mm/yy', showOn: 'button', buttonImage: '../images/calenda_icon.gif', buttonImageOnly: true }); 
                $j('.keysearch').live('keyup',function(){
                    if($j('.keysearch').val() == ""){
                        $j('.rich-table-row').show();
                                   
                    }else{
                        $j('.rich-table-row').hide();
                        $j('.rich-table-row').each(function(){
                            html = $j(this).html();
                            if(   ununicode(html).indexOf(  ununicode($j('.keysearch').val()) ) > -1    )  {
                                $j(this).show();
                            }else{
                                $j(this).hide();
                            }
                        });
                    }

                });
                
                $j(".rich-table-row:odd").addClass("odd");
            });
                    
        </script>
        <script type="text/javascript">
            $j(document).ready(function(){
                initThickBox('.thickbox');
            });
            
        </script>


        <style type="text/css">



            .rich-dtascroller-table {
                background-color: #FFFFFF;
                border-color: #82A6C7;
                float: right;
                margin-right: 0 !important;
                margin-top: 10px !important;
            }
            .rich-table-cell 
            {
                border-bottom: 1px solid #C4C0C9;
                border-right: 1px solid #C4C0C9 ;
                color: #000000;
                font-family: Arial,Verdana,sans-serif;
                font-size: 11px;
                padding: 0px !important;
            }
            .content .scrolls{
                width:800px !important;
                float:left;

                overflow:auto;
            }
            .content .rich-table{
                width:800px !important;
                float:left;

                overflow:auto;
            }
            .content table{
                width:800px !important;
                float:left;
            }
            .content_table {
                width:914px !important;
                float:left;

                overflow:auto;
            }

            .text_center{
                text-align: center;
            }
            .text_right{
                text-align: right;
            }
            .fieldset, img {
                border: 0 none;
                margin-top: 6px !important;
            }
            .date_test{
                height: 32px;
                width:135px;
                text-align: center;
            }
            .loaigd{
                padding: 9px;              
                width:129px;
                height: 14px;
            }
  
          
            .buttonsearch{
                border:0;
                background:url(../images/btn_search.png) repeat-x;
                width:30px; height:30px;
                color:#ffffff;
                cursor:pointer;
                text-transform:uppercase;
            }
            .feild_sex td label{width: 150px !important; color:white; font-size:12px; text-transform: none; margin-left:3px;}
            .group{
                width:150px; height:auto; position:absolute; background: #2B3844; color:white !important; top:46px; display:none;
            }
            .buttonsearch2{
                border:0;
                background:url(../images/bg_submit.gif) repeat-x;
                width:68px;

                margin:0px 0 10px 20px;
                color:#ffffff;
                font-size:12px;
                font-weight:bold;
                cursor:pointer;
                border-radius:2px;
                padding:4px 0;
                text-transform:uppercase;
            }
            input{
                float:left;
                margin-left:9px;
            }
            select{
                float:left;
                height: 21px;
                width:133px;
                margin-left:9px;
            }
            .add{
                width: 50px;
                margin-top:3px;
                display: none;
            }
            .add input[type="text"]
            {
                width: 102px !important;
                height:20px !important;
                margin-right: 5px;
            }
            .add img
            {
                margin-top: 4px !important;
            }
            .date{
                float: left;
                margin-top:3px;
                margin-left: 7px;
            }
            .date1{
                float: left;
                margin-top:3px;
                margin-left: 7px;
            }
            .closeGroup{
                float: right;
                font-size: 14px;
                margin-right: 5px;
                width:150px;
                height:auto;
                position:absolute;
                background: #2B3844;
                color:white !important;
                top:30px;
                display:none;
                text-align: right;
            }
            
            .odd{
                background: #F2F7FC;
            }
        </style>
    </head>


    <body>

        <a4j:form id="financial">
            <f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>
            <h:outputText value="<div class='permission' lang='#{loginSession.right.MENU_CUS_VIEW}'></div>" escape="false"/>
            <div id="content">
                <div id="menu_top">
                    <div class="dropdown">
                        <div class="select_choise">
                            <a href="#"><span>Khu vực</span></a>
                        </div>
                        <div class="select_hidden">
                            <ul>

                                <li><a href="#"><span>Filter Cấp 3</span></a></li>
                                <li><a href="#"><span>Filter Cấp 3</span></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="dropdown">
                        <div class="select_choise">
                            <a href="#"><span>Outlets</span></a>
                        </div>
                        <div class="select_hidden">
                            <ul>
                                <li><a href="#"><span>Ban Ðiều Hành</span></a></li>
                                <li><a href="#"><span>Nhóm IT</span></a></li>
                                <li><a href="#"><span>Filter Cấp 3</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="content_detail">
                    <div class="fast_search" style="margin-top:10px">
                        <h:inputText value="" onfocus="if(this.value=='')this.value='';" styleClass="keysearch"  style="width:335px"/>
                        <div  style="margin-left:5px; float:left ;width: 33px;" class="buttonsearch">
                            <div class="group2"><div id="group-close" class="closeGroup">X&nbsp;&nbsp;</div></div>
                            <div class="group1">
                                <div class="group" style="">

                                    <h:selectOneRadio id="go" layout="pageDirection" value="" styleClass="feild_sex"  style="margin-left:5px; margin-top:4px; padding:15px; width:195px; height:115px;"   >
                                        <f:selectItem itemValue="0" itemLabel="#{locale.all}" />
                                        <f:selectItem itemValue="1"  itemLabel="Thu (TM/CK)"/>
                                        <f:selectItem itemValue="2" itemLabel="Chi (TM/CK)"/>
                                        <f:selectItem itemValue="3" itemLabel="Thu (Tạm ứng)"/>                                  
                                        <f:selectItem itemValue="4" itemLabel="Chi (Tạm ứng)"/>
                                        <f:selectItem itemValue="5" itemLabel="Mã tour"/>
                                    </h:selectOneRadio>  
                                    <div class="add">
                                        <div class="date">
                                            <input value="<h:outputText value=""><f:convertDateTime pattern="dd/MM/yyyy"/></h:outputText>" type="text" id="dateStart" name="dateStart" class="input_fields date" /></br>
                                        </div>
                                        <div class="date1">
                                            <input value="<h:outputText value=""><f:convertDateTime pattern="dd/MM/yyyy"/></h:outputText>" type="text" id="dateEnd" name="dateEnd" class="input_fields date" />
                                        </div>
                                    </div>
                                    <h:commandButton styleClass="buttonsearch2" value="#{locale.search}"/>

                                </div>  
                            </div>
                        </div>
                    </div>
                    <div class="fillter">
                        <h:selectOneMenu value="">
                            <f:selectItem itemLabel="Căn bản" itemValue="0"/>
                            <f:selectItem itemLabel="BHXH" itemValue="1"/>
                            <f:selectItem itemLabel="Phụ cấp" itemValue="2"/>
                            <f:selectItem itemLabel="Khen thưởng" itemValue="3"/>
                            <f:selectItem itemLabel="Căn bản 1" itemValue="4"/>
                            <f:selectItem itemLabel="Căn bản 2" itemValue="5"/>
                        </h:selectOneMenu>
                    </div>
                    <div class="content_right" style="margin-top:18px;">

                        <div class="content_table">
                            <rich:dataTable styleClass="scrolls" id="tc" rowKeyVar="row" value="#{T950Bean.listT950}"  var="item" width="800px" columnClasses="center" rowClasses="mycolor"
                                            rows="15" reRender="ds">

                                <rich:column style="width:20px;">                                     
                                    <f:facet name="header">
                                        <h:outputText value="STT"/>
                                    </f:facet>

                                    <div style="width:20px;text-align: center">
                                        <h:outputText value="#{row+1}"/>
                                    </div>
                                </rich:column> 
                                <rich:column style="width:120px;">                                     
                                    <f:facet name="header">
                                        <h:outputText value="Họ và tên"/>
                                    </f:facet>

                                    <div style="width:120px;margin-left: 3px;">
                                        <h:outputText value="Nguyễn Sơn Tùng"/>
                                    </div>
                                </rich:column> 

                                <rich:column style="width:80px;">
                                    <f:facet name="header">
                                        <h:outputText value="Mức lương"/>
                                    </f:facet>
                                    <div style="width:80px;text-align: right;margin-right: 3px;">
                                        <h:outputText value="#{item.tn951st}"/>
                                    </div>
                                </rich:column> 
                                <rich:column  style="width:70px;" styleClass="text_right">
                                    <f:facet name="header">
                                        <h:outputText value="Trách nhiệm"/>
                                    </f:facet>
                                    <div style="width:70px;text-align: right;margin-right: 3px;">
                                        <h:outputText value="176,334"/>
                                    </div>
                                </rich:column> 
                               
                                <rich:column style="width:70px;" styleClass="text_right">
                                    <f:facet name="header">
                                        <h:outputText value="Lương </br>đóng BHXH" escape="false"/>
                                    </f:facet>
                                    <div style="width:70px;text-align: right;margin-right: 3px;">
                                        <h:outputText value="123,123"/>
                                    </div>
                                </rich:column> 
                                <rich:column style="width:50px;">
                                    <f:facet name="header">
                                        <h:outputText value="Xếp loại</br> A-B-C" escape="false"/>
                                    </f:facet>
                                    <div style="width:50px;text-align: center">
                                        <h:outputText value="A"/>
                                    </div>
                                </rich:column> 
                                <rich:column>
                                    <f:facet name="header">
                                        <h:outputText value="CC"/>
                                    </f:facet>
                                    <div style="width:20px;text-align: center">
                                        <h:outputText value="1"/>
                                    </div>

                                </rich:column> 
                                <rich:column styleClass="text_center">
                                    <f:facet name="header">
                                        <h:outputText value="TRONG GIỜ </br> Ngày công" escape="false"/>
                                    </f:facet>
                                    <div style="width:50px;text-align: right">
                                        <h:outputText value="26"/>
                                    </div>
                                </rich:column> 
                                <rich:column  styleClass="text_center">
                                    <f:facet name="header">
                                        <h:outputText value="TRONG GIỜ </br> Giờ công" escape="false"/>
                                    </f:facet>
                                    <div style="width:50px;text-align: right">
                                        <h:outputText value=""/>
                                    </div>
                                </rich:column> 
                                <rich:column >
                                    <f:facet name="header">
                                        <h:outputText value="NGOÀI GIỜ </br> Công trội </br> Ngày công" escape="false"/>
                                    </f:facet>
                                    <div style="width:50px;text-align: right">
                                        <h:outputText value="3"/>
                                    </div>
                                </rich:column> 

                                <rich:column>
                                    <f:facet name="header">
                                        <h:outputText value="NGOÀI GIỜ </br> Công trội </br> Giờ công" escape="false"/>
                                    </f:facet>
                                    <div style="width:50px;text-align: right">
                                        <h:outputText value="12"/>
                                    </div>
                                </rich:column> 
                                <rich:column style="text-align: center;">
                                    <f:facet name="header">
                                        <h:outputText value="NGOÀI GIỜ </br> Tăng ca </br> Ngày công" escape="false"/>
                                    </f:facet>
                                    <div class="loaigd" style="width:50px;text-align: right">
                                        <h:outputText value="10"/>
                                    </div>
                                </rich:column> 
                                <rich:column>
                                    <f:facet name="header">
                                        <h:outputText value="NGOÀI GIỜ </br> Tăng ca </br> Giờ công" escape="false"/>
                                    </f:facet>
                                    <div style="width:50px;text-align:right;">
                                        <h:outputText value="0"/>
                                    </div>
                                </rich:column> 
                                <rich:column>
                                    <f:facet name="header">
                                        <h:outputText value="Ca đêm"/>
                                    </f:facet>
                                    <div style="width:50px;text-align:right;margin-right: 3px;">
                                        <h:outputText value="3"/>
                                    </div>
                                </rich:column> 


                                <rich:column width="auto;">
                                    <f:facet name="header">
                                        <h:outputText value="Thưởng </br> A-B-C" escape="false"/>
                                    </f:facet>
                                    <div style="width:50px;text-align:right;margin-right: 3px;">
                                        <h:outputText value="100,000"/>
                                    </div>

                                </rich:column> 
                                
                                <rich:column width="auto;">
                                    <f:facet name="header">
                                        <h:outputText value="Tổng lương</br> ngày lễ" escape="false"/>
                                    </f:facet>
                                    <div style="width:80px;text-align:right;margin-right: 3px;">
                                        <h:outputText value="100,000"/>
                                    </div>

                                </rich:column> 
                                
                                <rich:column width="auto;">
                                    <f:facet name="header">
                                        <h:outputText value="Lương trong giờ"/>
                                    </f:facet>
                                    <div style="width:80px;text-align:right;">
                                        <h:outputText value="100,000"/>
                                    </div>

                                </rich:column> 
                                
                                <rich:column width="auto;">
                                    <f:facet name="header">
                                        <h:outputText value="Tổng lương </br> ngoài giờ" escape="false"/>
                                    </f:facet>
                                    <div style="width:70px;text-align:right;margin-right: 3px;">
                                        <h:outputText value="100,000"/>
                                    </div>

                                </rich:column> 
                                
                                <rich:column width="auto;">
                                    <f:facet name="header">
                                        <h:outputText value="Tiền bồi </br> dưỡng ca đêm" escape="false"/>
                                    </f:facet>
                                    <div style="width:60px;text-align:right;">
                                        <h:outputText value="100,000"/>
                                    </div>

                                </rich:column> 
                                
                                <rich:column width="auto;">
                                    <f:facet name="header">
                                        <h:outputText value="Trợ cấp </br> độc hại" escape="false"/>
                                    </f:facet>
                                    <div style="width:50px;text-align:right;margin-right: 3px;">
                                        <h:outputText value="100,000"/>
                                    </div>

                                </rich:column> 
                                
                                <rich:column width="auto;">
                                    <f:facet name="header">
                                        <h:outputText value="Phụ cấp </br> tiền xăng" escape="false"/>
                                    </f:facet>
                                    <div style="width:50px;text-align:right;margin-right: 3px;">
                                        <h:outputText value="100,000"/>
                                    </div>

                                </rich:column> 
                                
                                <rich:column style="width:80px;text-align:right;">
                                    <f:facet name="header">
                                        <h:outputText value="Tiền chuyên cần" escape="false"/>
                                    </f:facet>
                                    <div style="width:80px;text-align:right;">
                                        <h:outputText value="100,000"/>
                                    </div>

                                </rich:column> 
                                
                                <rich:column style="width:80px;text-align:right;">
                                    <f:facet name="header">
                                        <h:outputText value="TỔNG THU NHẬP"/>
                                    </f:facet>
                                    <div style="width:80px;text-align:right;">
                                        <h:outputText value="100,000"/>
                                    </div>

                                </rich:column> 
                                
                                <rich:column style="width:50px;text-align:right;">
                                    <f:facet name="header">
                                        <h:outputText value="BHXH 7%"/>
                                    </f:facet>
                                    <div style="width:50px;text-align:right;">
                                        <h:outputText value="167,825"/>
                                    </div>

                                </rich:column> 
                                
                                <rich:column style="width:50px;text-align:right;">
                                    <f:facet name="header">
                                        <h:outputText value="BHTN 1%"/>
                                    </f:facet>
                                    <div style="width:50px;text-align:right;">
                                        <h:outputText value="23,975"/>
                                    </div>

                                </rich:column> 
                                
                                <rich:column style="width:50px;text-align:right;">
                                    <f:facet name="header">
                                        <h:outputText value="BHYT 1.5%"/>
                                    </f:facet>
                                    <div style="width:50px;">
                                        <h:outputText value="93,562"/>
                                    </div>

                                </rich:column> 
                                
                               

                            </rich:dataTable>
                        </div>
                        <rich:datascroller align="left" for="tc" maxPages="20" style="margin-right: 5px !important;"
                                           page="#{dataScrollerBean.scrollerPage}" id="sc2" reRender="sc1" />

                        <rich:modalPanel id="ajaxLoadingModalBox" minHeight="30" minWidth="40"
                                         height="30" width="40" zindex="2000">
                            <h:outputText value="#{locale.please_wait}" styleClass="startDummer"></h:outputText>
                        </rich:modalPanel>

                        <h:inputHidden value="#{T950Bean.flag}" />




                    </div>
                </div>
            </div>


        </a4j:form>

    </body>
</html>

